<!--
 * @Author: wupeiwen <javapeiwen2010@gmail.com>
 * @Date: 2022-03-28 15:52:15
 * @LastEditors: wupeiwen <javapeiwen2010@gmail.com>
 * @LastEditTime: 2023-06-12 17:24:13
 * @FilePath: /tea-garden-web/src/pages/manager-person.vue
 * @Description: 管理-人员
-->
<template>
  <div class="manager-person">
    <div class="top-area">
      <i
        class="icon-button-back"
        @click="$router.push({ name: 'baseOverview' })"
      />
      <i class="icon-button-add" @click="handleAddUser" />
      <span class="page-name">人员管理</span>
      <section class="search-input">
        <input
          type="text"
          class="input"
          placeholder="人员姓名"
          :value="query"
          @input="setQuery"
        />
      </section>
    </div>
    <div class="left-area">
      <el-skeleton :loading="loading.users" animated>
        <template #template>
          <el-row class="table-header">
            <el-col :span="12">人员</el-col>
            <el-col :span="12">创建时间</el-col>
          </el-row>
          <el-skeleton-item
            class="table-row"
            variant="text"
            v-for="index in 8"
            :key="index"
          ></el-skeleton-item>
        </template>
        <template #default v-if="users.length === 0 && query === ''">
          <section
            style="
              width: 100%;
              margin-top: 40px;
              text-align: center;
              color: #333333;
            "
          >
            请新建人员
          </section>
        </template>
        <template #default v-else-if="users.length === 0 && query !== ''">
          <el-row class="table-header">
            <el-col :span="12">人员</el-col>
            <el-col :span="12">创建时间</el-col>
          </el-row>
          <section
            style="
              width: 100%;
              margin-top: 20px;
              text-align: center;
              color: #333333;
            "
          >
            没有匹配的人员
          </section>
        </template>
        <template #default v-else-if="users.length > 0">
          <el-row class="table-header">
            <el-col :span="12">人员</el-col>
            <el-col :span="12">创建时间</el-col>
          </el-row>
          <el-row
            class="table-row"
            :class="{ 'active-row': item.id === userInfo.id }"
            v-for="(item, index) in users"
            :key="index"
            @click="handleChoosePerson(item)"
          >
            <el-col class="row-name" :span="12">{{ item.userName }}</el-col>
            <el-col class="row-date" :span="12">{{
              item.createTime !== null ? item.createTime.substring(0, 10) : ""
            }}</el-col>
          </el-row>
        </template>
      </el-skeleton>
    </div>
    <!-- 右侧区域全空 -->
    <div class="right-area" v-if="!showUserForm && users.length === 0">
      <no-data style="margin: 60px auto 0 auto" />
    </div>
    <!-- 右侧区域为人员信息、农事记录 -->
    <div class="right-area" v-else-if="!showUserForm && users.length > 0">
      <div class="person-info">
        <el-skeleton :loading="loading.userInfo" animated>
          <template #template>
            <div style="padding: 35px 30px">
              <el-skeleton-item
                variant="circle"
                style="
                  display: inline-block;
                  --el-skeleton-circle-size: 45px;
                  margin-right: 15px;
                "
              />
              <div style="display: inline-block; width: calc(100% - 60px)">
                <el-skeleton-item variant="text" />
                <el-skeleton-item variant="text" />
              </div>
            </div>
          </template>
          <template #default>
            <section class="info-name">{{ userInfo.userName }}</section>
            <section class="info-status">{{ userInfo.status }}</section>
            <section class="info-groups">身份证: {{ userInfo.cardId.replace(/^(\d{6})\d{8}(\d{4})$/, "$1********$2")}}</section>
            <!-- <section class="info-groups">
              当前分组:
              <span
                class="group"
                :class="[`group-${index + 1}`]"
                v-for="(item, index) in userInfo.group_name"
                :key="index"
                >{{ item }}</span
              >
            </section> -->
            <section class="info-card-id">
              手机号码: {{ userInfo.phone.replace(/(\d{4})\d{4}(\d{2})/, "$1****$2") }}
            </section>
            <i class="icon-delete" @click="handleDeleteConfirm" />
            <i class="icon-edit" @click="handleEditUser" />
          </template>
        </el-skeleton>
      </div>
      <div class="record-list">
        <el-skeleton :loading="loading.userFarmWork" animated>
          <template #template>
            <span class="title">农事记录</span>
            <div style="padding: 35px 30px">
              <el-skeleton-item
                variant="text"
                v-for="index in 12"
                :key="index"
              />
            </div>
          </template>
          <template #default v-if="Object.keys(farmWorkTimeLine).length > 0">
            <span class="title">农事记录</span>
            <section class="list">
              <section
                class="level-1"
                v-for="(l1Value, l1Name) in farmWorkTimeLine"
                :key="l1Name"
              >
                <span class="year">{{ l1Name }}</span>
                <section
                  class="level-2"
                  v-for="(l2Value, l2Name) in l1Value"
                  :key="l1Name + '-' + l2Name"
                >
                  <span class="month">{{ l2Name }}</span>
                  <section
                    class="level-3"
                    v-for="(l3Value, l3Name) in l2Value"
                    :key="l1Name + '-' + l2Name + '-' + l3Name"
                  >
                    <el-row>
                      <el-col :span="3">
                        <span class="content-day">{{ l2Name + l3Name }}</span>
                      </el-col>
                      <el-col :span="7">
                        <span class="content-num"
                          >农事任务: {{ l3Value.length }}次</span
                        >
                      </el-col>
                    </el-row>
                    <section v-for="(l4, l4Index) in l3Value" :key="l4Index">
                      <el-row style="line-height: 30px; padding-top: 30px">
                        <el-col :span="7" :offset="3">
                          <span class="content-normal"
                            >农事:
                            {{ getDictItemNameById(l4.farmingType) }}</span
                          >
                        </el-col>
                        <el-col :span="7">
                          <span class="content-normal"
                            >参与地块:
                            <span
                              v-for="(mass, massIndex) in l4.massifNum"
                              :key="massIndex"
                              >{{ mass }}</span
                            ></span
                          >
                        </el-col>
                      </el-row>
                      <el-row style="line-height: 30px">
                        <el-col
                          :span="7"
                          :offset="3"
                          style="padding-bottom: 37.5px"
                          :style="{
                            'border-bottom':
                              l4Index === l3Value.length - 1
                                ? ''
                                : '1px solid #eaedf7',
                          }"
                        >
                          <!-- <span class="content-normal"
                            >问卷: {{ l4.feedback_id ? "是" : "否" }}</span
                          > -->
                          <span class="content-normal"
                            >参与人员:
                            <span
                              v-for="(user, groupIndex) in l4.groupUser"
                              :key="groupIndex"
                              >{{ user }}</span
                            ></span
                          >
                        </el-col>
                        <el-col
                          :span="7"
                          style="padding-bottom: 37.5px"
                          :style="{
                            'border-bottom':
                              l4Index === l3Value.length - 1
                                ? ''
                                : '1px solid #eaedf7',
                          }"
                        >
                          <!-- <span class="content-normal"
                            >参与人员:
                            <span
                              v-for="(user, groupIndex) in l4.groupUser"
                              :key="groupIndex"
                              >{{ user }}</span
                            ></span
                          > -->
                        </el-col>
                      </el-row>
                    </section>
                  </section>
                </section>
              </section>
            </section>
          </template>
          <template #default v-else>
            <no-data style="margin: 60px auto 0 auto" />
          </template>
        </el-skeleton>
      </div>
    </div>
    <!-- 右侧区域为新增、编辑表单 -->
    <div class="right-area" v-show="showUserForm">
      <div class="user-form">
        <span class="title">{{ userFormTitle }}</span>
        <span class="cancel-button" @click="handleCancel">取消</span>
        <span class="confirm-button" @click="handleAddEditConfirm">确认</span>
        <i class="icon-user" />
        <section class="form-content">
          <span class="form-label">*人员姓名</span>
          <section class="form-input-name">
            <input
              type="text"
              class="input"
              v-model="userForm.userName"
              placeholder="姓名"
            />
          </section>
          <span class="form-label">*手机号码</span>
          <section class="form-input-phone">
            <input
              type="text"
              class="input"
              v-model="userForm.phone"
              placeholder="11位手机号"
               @input="validateInput"
            />
          </section>
            <div v-if="validationMessage2" style="color: red;">{{ validationMessage2 }}</div>

          <span class="form-label">身份证号</span>
          <section class="form-input-idcard">
            <input
              type="text"
              class="input"
              v-model="userForm.cardId"
              placeholder="身份证号"
                @input="validateInput"
            />
          </section>
              <div v-if="validationMessage" style="color: red;">{{ validationMessage }}</div>
        </section>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  data () {
    return {
      showUserForm: false,
      userFormTitle: '',
      userForm: {
        id: '',
        userName: '',
        phone: '',
        cardId: ''
      },
      validationMessage: '',
      validationMessage2: '',
      timer: null
    }
  },
  watch: {
    query () {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.showUserForm = false
        this.clearUserInfo()
        this.clearUserFarmWork()
        this.getUsers()
      }, 1000)
    }
  },
  computed: {
    ...mapState('manager-person', ['query', 'users', 'userInfo', 'loading']),
    ...mapGetters('manager-person', ['farmWorkTimeLine']),
    ...mapGetters('common', ['getDictItemNameById']),
    ...mapState('base-overview', ['currentId'])
  },
  methods: {
    ...mapActions('manager-person', [
      'getUsers',
      'getUserDetail',
      'getUserFarmWork',
      'addUser',
      'editUser',
      'deleteUser'
    ]),
    ...mapMutations('manager-person', [
      'setQuery',
      'clearUserInfo',
      'clearUserFarmWork'
    ]),
    // 点击选中人员
    handleChoosePerson (person) {
      this.showUserForm = false
      this.getUserDetail(person.id)
      this.getUserFarmWork(person.id)
    },
    // 删除确认
    handleDeleteConfirm () {
      this.$confirm('确定要删除此人员以及其相关数据吗？', '删除人员', {
        confirmButtonText: '删除',
        cancelButtonText: '取消'
      })
        .then(() => {
          this.deleteUser(this.userInfo.id)
        })
        .catch(() => {})
    },

    // 新增用户
    handleAddUser () {
      this.handleClearUserForm()
      this.clearUserInfo()
      this.clearUserFarmWork()
      this.userFormTitle = '新增用户'
      this.showUserForm = true
    },
    validateInput () {
      const regex = /^\d{17}[\dXx]$/ // 身份证
      const regex2 = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
      const valid = regex.test(this.userForm.cardId)
      const valid2 = regex2.test(this.userForm.phone)
      if (valid2) {
        this.validationMessage2 = ''
      } else {
        this.validationMessage2 = '请输入正确的手机号码'
      }
      if (valid) {
        this.validationMessage = ''
      } else {
        this.validationMessage = '请输入正确的身份证号码'
      }
    },
    // 编辑用户
    handleEditUser () {
      this.userForm = Object.assign(
        {
          id: '',
          userName: '',
          phone: '',
          cardId: ''
        },
        this.userInfo
      )
      this.userFormTitle = '编辑用户'
      this.showUserForm = true
    },
    // 清除用户表单
    handleClearUserForm () {
      this.userForm = {
        id: '',
        userName: '',
        phone: '',
        cardId: ''
      }
    },
    // 取消用户弹窗
    handleCancel () {
      this.showUserForm = false
      this.userFormTitle = ''
      this.handleClearUserForm()
      let id = ''
      if (this.userInfo.id) {
        id = this.userInfo.id
      } else if (this.users.length > 0) {
        id = this.users[0].id
      }
      this.getUserDetail(id)
      this.getUserFarmWork(id)
    },
    // 新增或编辑用户确认
    handleAddEditConfirm () {
      this.validateInput()
      if (this.validationMessage2 === '' && this.validationMessage === '' && this.userForm.userName !== '') {
        this.$confirm('确定要保存当前数据吗？', '保存人员', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
          .then(async () => {
            if (this.userFormTitle === '新增用户') {
              await this.addUser(this.userForm)
            } else {
              await this.editUser(this.userForm)
            }
            this.showUserForm = false
            this.userFormTitle = ''
            this.handleClearUserForm()
          })
          .catch(() => {})
      } else {
        console.log('1')
      }
    }
  },
  created () {
    this.getUsers()
  }
}
</script>

<style lang="scss">
.manager-person {
  height: 100%;
  background: #eff7f8;
  position: relative;
  .top-area {
    position: relative;
    .icon-button-back {
      cursor: pointer;
      width: 18px;
      height: 18px;
      background-image: url("/public/image/common/icon-button-back-03.png");
      background-size: cover;
      position: absolute;
      left: 27px;
      top: 30.5px;
    }
    .page-name {
      font-size: 18px;
      font-family: PingFang SC-Heavy, PingFang SC;
      font-weight: 800;
      color: #089bab;
      height: 25px;
      width: 100px;
      text-align: center;
      position: absolute;
      left: 52px;
      top: 27px;
    }
    .icon-button-add {
      width: 18px;
      height: 18px;
      background-image: url("/public/image/common/icon-button-add.png");
      background-size: cover;
      position: absolute;
      left: 210.5px;
      top: 30.5px;
    }
    .search-input {
      position: absolute;
      left: 252px;
      top: 25.5px;
      &::before {
        display: inline-block;
        vertical-align: middle;
        content: "";
        width: 29px;
        height: 29px;
        background-image: url("/public/image/common/icon-button-search.png");
        background-size: cover;
        margin-right: 10px;
      }
      .input {
        border-top: 0;
        border-right: 0;
        border-bottom: 1px solid #9cd7dd;
        border-left: 0;
        width: 223.5px;
        height: 23px;
        line-height: 23px;
        font-size: 14px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #9cd7dd;
        background-color: transparent;
      }
      ::-webkit-input-placeholder {
        color: #9cd7dd;
        font-size: 14px;
      }
    }
  }
  .left-area {
    width: 232px;
    height: 620px;
    background: #ffffff;
    box-shadow: 0px 5px 10px 1px rgba(120, 146, 141, 0.12);
    border-radius: 15px;
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 16px;
    overflow-y: auto;

    .table-header {
      font-size: 16px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #333333;
      line-height: 33px;
    }
    .active-row {
      &::before {
        content: "";
        height: 53.5px;
        width: 4px;
        background: #fead54;
        position: absolute;
        left: -16px;
        top: 0;
      }
    }
    .table-row {
      line-height: 53.5px;
      border-bottom: 1px solid #f1f2f4;
      position: relative;
      .row-name {
        font-size: 16px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #089bab;
        display: inline-block;
        &::before {
          content: "";
          display: inline-block;
          vertical-align: middle;
          margin-right: 7px;
          width: 22px;
          height: 22px;
          background-image: url("/public/image/manager-person/icon-user.png");
          background-size: cover;
        }
      }
      .row-date {
        font-size: 12px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #9cd7dd;
      }
    }
  }
  .right-area {
    width: 1018px;
    height: 620px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    .person-info {
      width: 1018px;
      height: 118px;
      background: #ffffff;
      border-radius: 15px;
      margin-bottom: 10px;
      position: relative;
      .info-name {
        font-size: 18px;
        font-family: PingFang SC-Heavy, PingFang SC;
        font-weight: 800;
        color: #089bab;
        position: absolute;
        left: 29px;
        top: 36px;
        display: inline-block;
        &::before {
          content: "";
          width: 48.5px;
          height: 48.5px;
          background-image: url("/public/image/manager-person/icon-user.png");
          background-size: cover;
          display: inline-block;
          vertical-align: top;
          margin-right: 15px;
        }
      }
      .info-status {
        position: absolute;
        left: 92.5px;
        bottom: 34.5px;
        font-size: 14px;
        font-family: PingFang SC-Medium, PingFang SC;
        // font-weight: 500;
        color: #333333;
      }
      .info-card-id {
        position: absolute;
        left: 264px;
        top: 36px;
        font-size: 16px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
      }
      .info-phone {
        position: absolute;
        left: 561px;
        top: 36px;
        font-size: 16px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
      }
      .info-groups {
        position: absolute;
        left: 264px;
        bottom: 30px;
        font-size: 16px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        .group {
          height: 20px;
          line-height: 20px;
          padding: 0 8.5px;
          border-radius: 4px;
          display: inline-block;
          vertical-align: middle;
          font-size: 12px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          margin-right: 6px;
          &:last-of-type {
            margin-right: 0;
          }
        }
        .group-1 {
          color: #369bff;
          background: #bcdeff;
        }
        .group-2 {
          color: #fa5087;
          background: #fee3ec;
        }
        .group-3 {
          color: #1fd0a3;
          background: #dbf7f0;
        }
        .group-4 {
          color: #ffc800;
          background: #fff6d6;
        }
        .group-5 {
          color: #906bff;
          background: #dacdff;
        }
        .group-6 {
          color: #92f218;
          background: #ecffd4;
        }
        .group-7 {
          color: #eee400;
          background: #fffdcf;
        }
        .group-8 {
          color: #e04040;
          background: #ffacac;
        }
        .group-9 {
          color: #e27700;
          background: #ffd3a2;
        }
        .group-10 {
          color: #00a8c8;
          background: #95e0ee;
        }
      }
      .icon-delete {
        position: absolute;
        right: 45.5px;
        top: 33px;
        width: 23px;
        height: 23px;
        background-image: url("/public/image/common/icon-button-delete.png");
        background-size: cover;
      }
      .icon-edit {
        position: absolute;
        right: 100px;
        top: 33px;
        width: 23px;
        height: 23px;
        background-image: url("/public/image/common/icon-button-edit.png");
        background-size: cover;
      }
    }
    .record-list {
      width: 1018px;
      height: 495px;
      background: #ffffff;
      border-radius: 15px;
      position: relative;
      padding: 25px 0;
      .title {
        height: 25px;
        line-height: 25px;
        font-size: 18px;
        font-family: PingFang SC-Heavy, PingFang SC;
        font-weight: 800;
        color: #089bab;
        padding: 0 29px;
        display: block;
      }
      .list {
        display: block;
        height: calc(100% - 25px);
        overflow-y: auto;
        .level-1 {
          .year {
            display: inline-block;
            width: 100%;
            height: 50px;
            line-height: 50px;
            font-size: 18px;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #089bab;
            border-bottom: 1px solid #eaedf7;
            padding: 0 29px;
            left: 0;
            top: 0;
            &::before {
              content: "";
              width: 25px;
              height: 25px;
              background-image: url("/public/image/manager-person/icon-timepiece.png");
              background-size: cover;
              display: inline-block;
              vertical-align: middle;
              margin-right: 10.5px;
            }
          }
          .level-2 {
            .month {
              height: 41.5px;
              line-height: 41.5px;
              font-size: 18px;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #089bab;
              padding: 0 29px;
            }
            .level-3 {
              min-height: 140px;
              background: rgba(254, 173, 84, 0.05);
              border-radius: 0px 0px 0px 0px;
              position: relative;
              padding: 15px 25.5px;
              &::before {
                content: "";
                width: 5px;
                height: 110px;
                background: linear-gradient(180deg, #ffc0b8 0%, #fd988b 100%);
                border-radius: 2px 2px 2px 2px;
                position: absolute;
                left: 0;
                top: 15px;
              }
              .content-day {
                font-size: 18px;
                font-family: PingFang SC-Heavy, PingFang SC;
                font-weight: 800;
                color: #333333;
              }
              .content-num {
                font-size: 18px;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 500;
                color: #979797;
              }
              .content-normal {
                font-size: 16px;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
              }
            }
          }
        }
      }
    }
    .user-form {
      width: 1018px;
      height: 719px;
      background: #ffffff;
      border-radius: 15px;
      opacity: 1;
      position: relative;
      .title {
        font-size: 18px;
        font-family: PingFang SC-Heavy, PingFang SC;
        font-weight: 800;
        color: #089bab;
        position: absolute;
        left: 29px;
        top: 19px;
      }
      @mixin button {
        width: 105px;
        height: 38px;
        border-radius: 8px;
        font-size: 18px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        line-height: 38px;
        text-align: center;
      }
      .cancel-button {
        @include button;
        color: #089bab;
        background: rgba(230, 245, 246, 0.8);
        position: absolute;
        right: 166px;
        top: 21.5px;
      }
      .confirm-button {
        @include button;
        color: #ffffff;
        background: #089bab;
        position: absolute;
        right: 29px;
        top: 21.5px;
      }
      .icon-user {
        width: 84.5px;
        height: 84.5px;
        background-image: url("/public/image/manager-person/icon-user.png");
        background-size: cover;
        position: absolute;
        left: 435.5px;
        top: 69px;
      }
      .form-content {
        width: 707.5px;
        height: 448px;
        position: absolute;
        left: 124px;
        top: 180px;
        .form-label {
          height: 25px;
          line-height: 25px;
          font-size: 18px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #089bab;
          display: block;
        }
        @mixin form-input {
          width: 100%;
          border-radius: 15px;
          border: 2px solid #089bab;
          margin-top: 14px;
          margin-bottom: 14px;
          .input {
            display: inline-block;
            font-size: 18px;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 51px;
            height: 51px;
            width: calc(100% - 68px);
            border: 0;
          }
          &::before {
            display: inline-block;
            vertical-align: middle;
            content: "";
            width: 49px;
            height: 49px;
            background-size: cover;
            margin-right: 10px;
          }
          ::-webkit-input-placeholder {
            color: #9cd7dd;
            font-size: 18px;
          }
        }
        .form-input-name {
          @include form-input;
          &::before {
            background-image: url("/public/image/manager-person/icon-user-small.png");
          }
        }
        .form-input-phone {
          @include form-input;
          &::before {
            background-image: url("/public/image/manager-person/icon-phone.png");
          }
        }
        .form-input-idcard {
          @include form-input;
          &::before {
            background-image: url("/public/image/manager-person/icon-idcard.png");
          }
        }
      }
    }
  }
}
</style>
